<template>
  <div class="peipao_body">
    <div class="table_body">
      <el-row type="flex" justify="center" style="margin-bottom: 20px">
        <el-col :span="24">
          <el-button
            class="diy_btn dl_color"
            type="primary"
            size="small"
            @click="add_customer"
            >新 增</el-button
          >
        </el-col>
      </el-row>
      <ty-Table :tablePrps="tablePrps" :tableData="tableData" :fixed_width="'250'">
        <template slot-scope="props" slot="diy_column">
          <template v-if="props.row.key == 'type'">
            {{ props.row.type | filte_type_fun }}
          </template>
        </template>

        <template slot="diy_fixed" slot-scope="props">
          <el-button class="dl_color_btn" type="text" @click="delete_customer(props.row)">删除</el-button>
           <el-button class="dl_color_btn" type="text" @click="update_customer(props.row)">编辑</el-button>
          <el-button class="dl_color_btn" type="text" @click="update_status(props.row)">{{ props.row.status=='enabled'?'禁用':'启用' }}</el-button>
        </template>
      </ty-Table>
    </div>
    
    <!--新增/修改-->
    <el-dialog :title="customer_type==1?'新增':'修改'" :visible.sync="c_dialog" width="450px" center class="ty_tc_title">
      <el-form
        label-width="100px"
        class="ty_tc_form"
        :model="customer_form"
      >
        
        <el-form-item label="客服名称">
          <el-input
            placeholder="请输入客服名称"
            v-model="customer_form.name"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input
            placeholder="请输入联系方式"
            v-model="customer_form.contact"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="联系方式类型">
          <el-select v-model="customer_form.type" placeholder="请选择联系方式类型">
            <el-option
              v-for="(item, index) in contact_type"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer ty_tc_btn">
        <el-button @click="c_dialog = false">取 消</el-button>
        <el-button type="primary" @click="update_customer_fun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tyTable from "@/components/ty_el_table/ty_el_table.vue";
import {
  getCustomerServices,
  addCustomerService,
  updateCustomerService,
  deleteCustomerService,
  abandonCustomerService,
} from "@/api/user.js";
export default {
  components: {
    tyTable,
  },
  data() { 
    const tablePrps = [
      { key: "id", label: "id" },
      { key: "name", label: "客服名称" },
      { key: "contact", label: "联系方式" },
      { diy_show: true, key: "type", label: "联系方式类型" },
    ];

    return {
      tablePrps,
      tableData: [],
      customer_type: 1, // 1.新增 2.编辑
      contact_type: [
        { label: "座机", value: "landline" },
        { label: "手机", value: "mobile" },
        { label: "QQ", value: "qq" },
        { label: "微信", value: "wechat" },
      ],
      c_dialog:false,
      customer_form: {
        service_id: "",
        name:'',
        contact: "",
        type:''
      },
    };
  },
  filters: {
    filte_type_fun(value) {
      const types = {
        landline: "座机",
        mobile: "手机",
        qq: "QQ",
        wechat: "微信",
      };
      return types[value] || value;
    },
  },
  mounted() {
    this.getCustomerServices_fun();
  },
  methods: {
    update_status(row){
      abandonCustomerService({
        service_id: row.id,
        status: row.status == 'enabled' ? 'disabled' : 'enabled',
      })
      .then((res) => {
        this.$message.success(`操作成功`);
        this.getCustomerServices_fun();
      });
    },

    update_customer(row){
        this.customer_type = 2;
        this.customer_form = {
            service_id: row.id,
            name: row.name,
            contact: row.contact,
            type: row.type,
        };
        this.c_dialog = true;
    },
    delete_customer(row) {
      this.$confirm(`是否确认删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        customClass: "ty_tc_btn",
      })
        .then(() => {
          deleteCustomerService({ service_id: row.id }).then((res) => {
            this.$message.success(`删除成功`);
            this.getCustomerServices_fun();
          });
        })
        .catch(() => {});
    },
    add_customer() {
        this.customer_type = 1;
        this.customer_form = {
          service_id: "",
          name: '',
          contact: "",
          type: ''
        };
        this.c_dialog = true;
    },

    update_customer_fun(){
        if(!this.customer_form.name){
            this.$message.error('客服名称不能为空');
            return;
        }
        if(!this.customer_form.contact){
            this.$message.error('联系方式不能为空');
            return;
        }
        if(!this.customer_form.type){
            this.$message.error('联系方式类型不能为空');
            return;
        }
        const {service_id,name,contact,type} = this.customer_form;
        let http,params={};
        if(this.customer_type==1){
            http = addCustomerService;
            params = {name,contact,type};
        }else{
            http = updateCustomerService;
            params = {service_id,name,contact,type};
        }
        http(params).then((res) => {
            this.$message.success(this.customer_type==1?'新增成功':'修改成功');
            this.c_dialog = false;
            this.getCustomerServices_fun();
        });
    },

    getCustomerServices_fun() {
      getCustomerServices().then((res) => {
        this.tableData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.peipao_body {
  .table_body {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }
}
</style>
